<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新增维保信息</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">名称：</view>
				<input placeholder="请输入设备名称" name="input" style="text-align: center"
					v-model="myFormData.deviceName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">型号：</view>
				<input placeholder="请输入设备型号" name="input" style="text-align: center"
					v-model="myFormData.deviceType"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">数量：</view>
				<input placeholder="请输入数量" name="input" style="text-align: center"
					v-model="myFormData.deviceCount"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">保养人：</view>
				<input placeholder="请输入保养人" name="input" style="text-align: center"
					v-model="myFormData.maintainMan"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">检查人：</view>
				<input placeholder="请输入检查人" name="input" style="text-align: center"
					v-model="myFormData.checkMan"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">维保内容：</view>
				<textarea style="height: 3rem;" placeholder="请输入维保内容" name="input"
					v-model="myFormData.maintainContent"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">维保周期：</view>
				<input placeholder="请输入维保周期" name="input" style="text-align: left"
					v-model="myFormData.maintainCycle"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">完成情况：</view>
				<textarea style="height: 3rem;" placeholder="请输入完成情况" name="input"
					v-model="myFormData.finishContent"></textarea>
			</view>

			<view class="cu-form-group">
				<view class="title">备注：</view>
				<textarea style="height: 3rem;" placeholder="请输入备注" name="input" v-model="myFormData.remark"></textarea>
			</view>


			<view class="cu-form-group">
				<view class="title">照片</view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>

			<view class="cu-form-group">
				<view class="title">维保时间:</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="myFormData.maintainTime" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input">{{myFormData.maintainTime}}</view>
					</picker>
				</view>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @click="onSubmit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	// import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue"
	// import uniSection from "@/components/uni-section.vue"
	import appSelect from '@/components/my-componets/appSelect.vue'
	import myDate from '@/components/my-componets/my-date.vue'

	export default {
		// components:{
		// 	comboxSearch,
		// 	uniSection
		//  },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				index: -1,
				switchC: true,
				imgList: [],
				videoList: [],
				plan_type: [],
				type: "1",
				selected: [],
				msg: "",
				src: "", //视频存放
				uploadUrl: "/three/upload",
				uploadUrlVideo: "/api/v1/appbusiness/two/uploadVideo",
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				showVideo: false,
				candidates: [{
					name: ''
				}, {
					id: 11,
					name: '北京'
				}, {
					id: 2,
					name: '南京'
				}, {
					id: 3,
					name: '东京'
				}],
				keyName: 'name',
				index: null,
				myFormData: {
					id: '',
					companyId: '',
					deviceName: '',
					deviceType: '',
					deviceCount: '',
					maintainContent: '',
					maintainCycle: '',
					maintainMan: '',
					checkMan: '',
					finishContent: '',
					remark: '',
					picture: '',
					// updateTime:'',
					// createTime:'',
					installtype: '1',
					installplace: '1',
					maintainTime: currentDate,
					address: '',
				},
			};
		},
		onLoad: function(option) {
			var that = this;
			this.scanss();

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {

			bindDateChange: function(e) {
				this.myFormData.maintainTime = e.detail.value
				console.log('!!~~~~~~~~~~~~~~', this.myFormData.maintainTime)
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			onSubmit() {
				let myForm = this.myFormData
				console.log('myform', this.myFormData)
				this.$tip.loading();
				this.$http.put('/three/deviceMaintainAdd', this.myFormData).then(res => {
					console.log(res)
					/* this.$tip.loaded(); */
					if (res.data.success) {
						this.$tip.toast('提交成功')
						/* uni.navigateTo({
								url: '/pages/common/emergency'
							}) */
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 上一页
						uni.navigateBack({
							success: function() {
								beforePage.onLoad(); // 执行上一页的onLoad方法
							}
						});
					} else {
						this.$tip.toast(res.data.message)
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			scanss() {
				this.$http.get('/app/uList', {
					params: {}
				}).then(res => {
					/* console.log(res); */
					if (res.data.success) {
						this.candidates = res.data.result;
					}

				}).catch(() => {
					//联网失败, 结束加载

				})
			},
			ChooseImage() {
				var that = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length == 0) {
							this.imgList = res.tempFilePaths
						} else {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						}
						const myimg = res.tempFilePaths;
						for (let i = 0; i < myimg.length; i++) {
							that.$http.upload(that.$config.apiUrl + that.uploadUrl, {
									filePath: myimg[i],
									name: 'file'
								})
								.then(res => {
									/* that.myFormData.avatar=res.data.message; */
									console.log(res.data.message)
									let v = that.myFormData.picture;
									if (v == '') {
										that.myFormData.picture = res.data.message;
									} else {
										that.myFormData.picture = v + ',' + res.data.message;
									}


									/* that.showVideo=true;
									that.src=res.data.message; */
								})
								.catch(err => {
									that.$tip.error(err.data.message)
								});
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '你好',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						// if (res.confirm) {
						// 	this.imgList.splice(e.currentTarget.dataset.index, 1)
						// }
						// 删除imgList数组中的照片
						var index = e.currentTarget.dataset.index;
						this.imgList.splice(index, 1);

						// 更新myFormData.picture的赋值
						var remainingPictures = this.imgList.map(function(img) {
							return img.path;
						});
						this.myFormData.picture = remainingPictures.join(',');
					}
				})
			}


		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.burst-wrap {
		width: 100%;
		height: 100%;
	}

	.burst-wrap .burst-wrap-bg>view {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 65upx;
		left: 0;
		right: 0;
	}

	.form-item {
		width: 100%;
	}

	.form-item textarea {
		display: block;
		height: 220upx;
		width: 100%;
		color: #AAAAAA;
		font-size: 28upx;
	}

	.uni-uploader__file,
	.uploader_video {
		position: relative;
		z-index: 1;
		width: 200upx;
		height: 200upx;
	}

	.uni-uploader__img {
		width: 200upx;
		height: 200upx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5upx;
		background: linear-gradient(90deg, rgba(251, 91, 80, 1) 0%, rgba(240, 45, 51, 1) 100%);
		color: #FFFFFF;
		z-index: 999;
		border-top-right-radius: 20upx;
		border-bottom-left-radius: 20upx;
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.login-input-box {
		position: relative;
		border-bottom: 1upx solid #EEEEEE;
	}

	.login-input-box .forget,
	.login-input-box .phone {
		position: absolute;
		top: 0;
		height: 100%;
		z-index: 100;
	}

	.login-input-box .phone {
		width: 100upx;
		left: 0;
		color: #666666;
		font-weight: bold;
	}

	.login-input-box .phone-input {
		padding-left: 100upx;
	}

	.address-wrap,
	.open-info {
		margin-top: 20upx;
	}

	.open-info>view:last-child {
		font-size: 28upx;
		color: #999999;
	}

	.address-wrap .address {
		background: #F2F2F2;
		border-radius: 40upx;
		padding: 0 20upx;
	}

	.user-set-btn {
		margin: 40upx;
		background: linear-gradient(90deg, rgba(251, 91, 80, 1) 0%, rgba(240, 45, 51, 1) 100%);
		color: #FFFFFF;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
	}

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
		/* overflow: hidden; */
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		padding: 0px 12px;
		background-color: #FFFFFF;
	}

	.result-box {
		text-align: center;
		padding: 20px 0px;
		font-size: 16px;
	}
</style>